<template>
  <div class="centeet">
    <div class="top">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
              <a-form-item :label="$t('message.template_name')">
                <j-input style="margin: -5px 0; width: 80%" v-model="form.name" :placeholder="$t('message.Please_enter')" allowClear/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item :label="$t('message.Accounting_standard')">
                <a-select style="width: 80%" :placeholder="$t('message.Please_select')" v-model="form.standardId" allowClear>
                  <a-select-option v-for="province in provinceData" :key="province.key">
                    {{ province.title }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <span style="float: right; overflow: hidden" class="table-page-search-submitButtons">
              <a-col :md="6" :sm="24">
                <a-button type="primary" @click="searchQuery">{{$t('message.Search')}}</a-button>
                <a-button style="margin-left: 8px" @click="searchReset">{{$t('message.Reset')}}</a-button>
              </a-col>
            </span>
          </a-row>
        </a-form>
      </div>
    </div>

    <div class="tables">
      <a-button type="primary" @click="handleAdd" class="m_mb24" icon="plus">{{$t('message.New_template_added')}}</a-button>
      <a-table size="middle" :columns="columns" :data-source="dataSource" bordered @change="onchange" :pagination="pagination">
        <template slot="operation" slot-scope="text, record, index">
          <div class="editable-row-operations">
            <a @click="() => saveUse(record)">{{$t('message.Use')}}</a>
            <a @click="() => saveChange(record.id)">{{$t('message.Examine')}}</a>
            <a-popconfirm :title="$t('message.Confirm_delete')+'?'" :cancelText="$t('message.Cancel')" :okText="$t('message.Confirm')" @confirm="() => saveDelte(record.id)">
              <a>{{$t('message.Delete')}}</a>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
    </div>

    <a-modal :title="$t('message.Use')" :visible="visible" @ok="handleOk" :width="600" @cancel="handleCancel">
      <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" :model="tpyzObject" ref="ruleForm"
                    v-if="visible">
        <a-form-model-item :label="$t('message.Accounting_entity')" prop="targetId">
          <a-select style="width: 100%" :placeholder="$t('message.Please_select')" v-model="tpyzObject.targetId">
            <a-select-option v-for="province in ofCostCalc" :key="province.id">
              {{ province.departName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <div class="flexs">
          <div class="colors"><span>*</span> {{$t('message.Accounting_date')}}：</div>
          <a-date-picker :placeholder="$t('message.Please_select')" @panelChange="panelChange" :open="oprnYerOpen"
                         @openChange="onPrnYerOpenlChange" mode="year" :format="monthFormat" v-model="tpyzObject.year"/>
        </div>
        <div v-if="plpds" style="color: red; margin-left: 115px">{{$t('message.please_select_accounting_time')}}</div>
      </a-form-model>
    </a-modal>

    <section class="m_popupBox" v-if="isShowDetailPopup">
      <tpyzDetail
          ref="tpyzDetail"
          addUrl="/orgCarbonEmissionSource/addSystemFromUser"
          editUrl="/orgCarbonEmissionSource/editFromUser"
          saveUrl="/orgCheckTemplate/addFromAdmin"
          @back="back"
          :type="type"
          :queryId="queryId"
          :newForm="tpyzObject">
      </tpyzDetail>
    </section>
  </div>
</template>
<script>
import tpyzDetail from "@comp/common/tpyzDetail.vue";
import {getAction, postAction, deleteAction} from "@api/manage";
import moment from "moment";
import {cloneObject} from "@/utils/util";

export default {
  name: "template",
  components: {
    tpyzDetail,
  },
  data() {
    return {
      plpds: false,
      visible: false,
      type: 1, //1新增   2数据核算填报
      monthFormat: "YYYY",
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      columns: [
        {
          title: this.$t('message.Template_name'),
          align: "center",
          dataIndex: "name",
        },
        {
          title: this.$t('message.Accounting_standard'),
          dataIndex: "standardId_dictText",
          align: "center",
        },
        {
          align: "center",
          title:this.$t('message.Industry'),
          dataIndex: "profession_dictText",
        },
        {
          align: "center",
          title:this.$t('message.Founder'),
          dataIndex: "createBy_dictText",
        },
        {
          align: "center",
          title: this.$t('message.Update_date'),
          dataIndex: "createTime",
        },
        {
          align: "center",
          title: this.$t('message.Handle'),
          dataIndex: "operation",
          scopedSlots: {customRender: "operation"},
        },
      ],
      provinceData: [],
      ofCostCalc: [],
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条';
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      dataSource: [],
      oprnYerOpen: false,
      isShowDetailPopup: false,
      form: {},
      tpyzObject: {
        year: "",
        targetId: undefined,
      },
      queryId: "",
      rules: {
        targetId: [
          {required: true, message: this.$t('message.please_select_accounting_entity'), trigger: "blur"},
        ],
      },
    };
  },
  mounted() {
    this.getData(1);
    this.loadTreeRoot();
  },
  methods: {
    onPrnYerOpenlChange(status) {
      console.log(status);
      this.oprnYerOpen = status;
    },
    back() {
      this.isShowDetailPopup = false;
      this.getData(1);
    },
    panelChange(e) {
      this.tpyzObject.year = moment(e).format("YYYY");
      this.oprnYerOpen = false;
    },
    /**
     * 查看模版
     */
    saveChange(value) {
      console.log(value);
      this.queryId = value;
      this.isShowDetailPopup = true;
    },
    /**
     * 获取所有核算主体
     */
    getOrgAllSubjectOfCostCalc(value) {
      getAction("/orgDept/getOrgAllSubjectOfCostCalc", "").then((res) => {
        if (res.success) {
          this.ofCostCalc = res.result;
        }
      });
    },
    /**
     * 使用模版
     */
    saveUse(value) {
      console.log(value)
      this.visible = true;
      this.tpyzObject.standardId = value.standardId
      this.getOrgAllSubjectOfCostCalc();
    },
    /**
     * 删除模版
     */
    saveDelte(value) {
      getAction("/orgCheckTemplate/removeById", {
        id: value,
      }).then((res) => {
        if (res.success) {
          this.getData(1);
        }
      });
    },
    /**
     * 核算标准
     */
    loadTreeRoot() {
      getAction("/sys/category/loadTreeRoot", {
        pcode: "A01",
        async: true,
      }).then((res) => {
        if (res.success) {
          this.provinceData = res.result || [];
        }
      });
    },
    /**
     * 用户数据分页
     */
    getData(page) {
      if (page === 1) {
        this.pagination.current = 1;
      }
      let reqData = cloneObject(this.form)
      reqData.pageNo = this.pagination.current
      reqData.pageSize = this.pagination.pageSize
      getAction("/orgCheckTemplate/queryOrgPageList", reqData).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records || [];
          this.pagination.total = res.result.total;
        }
      });
    },
    /**
     * 查詢
     */
    searchQuery() {
      this.getData(1);
    },
    /**
     * 重置
     */
    searchReset() {
      this.form = {}
      this.getData(1);
    },
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (!this.tpyzObject.year) {
            this.plpds = true;
            return;
          } else {
            this.plpds = false;
          }
          postAction("/orgCheckCheck/createNewCommonCheck", {
            standardId: this.tpyzObject.standardId,
            checkTargetId: this.tpyzObject.targetId,
            year: this.tpyzObject.year,
          }).then((res) => {
            if (res.success) {
              this.type = 2;
              this.tpyzObject.checkId = res.result.id;
              this.visible = false;
              this.isShowDetailPopup = true;
            } else {
              this.$message.warning(res.message);
            }
          });
        } else {
          if (!this.newForm.year) {
            this.plpds = true;
          }
          console.log("error submit!!");
          return false;
        }
      });
      console.log(this.tpyzObject);
    },
    handleCancel() {
      this.tpyzObject = {
        year: "",
        departId: undefined,
      };
      this.visible = false;
    },
    //分页
    onchange(e) {
      console.log(e);
      this.pagination = e;
      this.getData();
    },
    //打开抽屉
    handleAdd() {
      this.queryId = "";
      this.type = 1;
      this.isShowDetailPopup = true;
    },
    //关闭
    onClose() {
      this.visible = false;
    },
  },
};
</script>
<style lang="less" scoped>
.flexs {
  display: flex;
  align-items: center;
  margin-left: 35px;
}

.colors {
  span {
    color: red;
  }
}

.editable-row-operations {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
}

.centeet {
  padding: 24px;
}

.mar-bonst {
  margin-bottom: 66px;
}

.felxs {
  justify-content: flex-end;
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  display: flex;
  align-items: center;
  z-index: 1;

  .quxiao {
    width: 60px;
    height: 32px;
    background: #e7e7e7;
    border-radius: 3px 3px 3px 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);
  }

  .sunber {
    width: 60px;
    height: 32px;
    background: #148958;
    border-radius: 3px 3px 3px 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin-left: 8px;
  }
}

.color1 {
  color: #888888;
}

.inpts {
  width: 80px !important;
}

.tianjia {
  width: 380px;
  height: 156px;
  background: #f8f8f8;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .color {
    color: #888888;
  }

  .leftShoudong {
    background: #fff !important;
    border-color: #148958 !important;
    color: #148958 !important;
  }

  .marRight {
    margin-left: 16px;
  }
}

.tables {
  padding: 24px;
  background: #ffffff;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #eeeeee;
  margin-top: 24px;
}

.top {
  background: #ffffff;
  border-radius: 3px 3px 3px 3px;
  padding: 24px 24px 0;
}
</style>
